<style lang="stylus">
body
  app-region no-drag
  overflow hidden
</style>

<style lang="stylus" scoped>
@import '../styl/area.styl'
p>i

  &>b.drag
    background url('!/svg/o.svg'), url('!/svg/o.svg') 100% 0, url('!/svg/o.svg') 0 100%, url('!/svg/o.svg') 100% 100%, url('!/svg/o.svg') 50% 0, url('!/svg/o.svg') 50% 100%, url('!/svg/o.svg') 0 50%, url('!/svg/o.svg') 100% 50%
    background-repeat no-repeat

    &>i
      top 36px
      left @top
      right @top
      bottom @top
      user-select none
      position absolute
      display flex
      justify-content center
      z-index 1
      font-style normal

</style>

<template lang="pug">
drag(:minH="95" :minW="242" :move="move" :style="init" ref="drag" v-if="wait")
  b.drag
    i
      nav
        btn(@click.prevent="start") 开始录制
        btn(@click.prevent="cancel") ×
i(:style="{ width: `${w}px`, height: `${h}px`, left: `${x}px`, top: `${y}px` }" v-else)
  b
</template>

<script lang="coffee">

import ipc from '~/lib/ipc.coffee'
import ON from '~/lib/broadcast/on.coffee'
import btn from '~/vue/btn.vue'
import Drag from '@rmw/vue3-drag'
import '@rmw/vue3-drag/drag.css'


export default {
components: {
  Drag
  btn
}
setup:=>
  {body} = document
  {clientHeight,clientWidth} = body
  wait = shallowRef true
  bh = innerHeight*2
  bw = innerWidth*2
  space = 96
  h = Math.min 546,clientHeight-space
  w = Math.min h*1.57,clientWidth-space
  x = (clientWidth - w) / 2
  y = (clientHeight - h) / 2
  init = {
    width: "#{w}px"
    height: "#{h}px"
    left: "#{x}px"
    top: "#{y}px"
  }

  x = shallowRef x
  y = shallowRef y
  h = shallowRef h
  w = shallowRef w


  drag = shallowRef()

  {cancel} = ipc.recbar
  onMounted =>
    elem = drag.value.i

    (
      ob = new ResizeObserver (li)=>
        for {target:{clientHeight:height,clientWidth:width}} from li
          if width == 0
            ob.unobserve elem
            return
          w.value = width
          h.value = height
          break
        return
    ).observe elem
    return


  return {
    drag
    wait
    x
    y
    w
    h
    init
    start:=>
      wait.value = false
      localStorage.area = JSON.stringify [
        x.value
        y.value
        w.value
        h.value
      ].map(Math.round)
      await ipc.area()
      return
    move:({offsetLeft, offsetTop},_x,_y)=>
      x.value = offsetLeft+_x
      y.value = offsetTop+_y
      return
    cancel
  }
}
</script>
